<template>
  <view class="box">
    <!-- 获取收货地址 -->
    <button v-if="!addressInfo" @click="getAddress" type="primary" plain>获取收货地址</button>
    <!-- 地址信息 -->
    <view class="address" v-if="addressInfo">
      <view class="userInfo">
        <view>{{addressInfo.userName}}</view>
        <view>{{addressInfo.telNumber}}</view>
      </view>
      <view>
        {{addressInfo.provinceName}}
        {{addressInfo.cityName}}
        {{addressInfo.countyName}}
        {{addressInfo.detailInfo}}
      </view>
    </view>
    <view class="item" v-for="(item,index) in cartList" :key="item.goods_id">
      <image :src="item.pics[0].pics_big" />
      <view class="item_info">
        <view class="info_name">{{item.goods_name}}</view>
        <view class="item_price">
          <view class="price">￥{{item.goods_price}}</view>
          <view class="changNum">
            <text>x {{item.count}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部 -->
    <view class="floor" v-if="cartList.length">
      <view class="left">
        <view class="total">
          <view>
            实付款：
            <text>￥{{allPrice}}</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="navigator">
          <button class="login_pay" open-type="getUserInfo" @getuserinfo="getUserInfo">获取收货地址</button>
          <view>结算({{length}})</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: [],
      addressInfo: null,
      cartList: [],
    }
  },
  onLoad() {
    this.addressInfo = uni.getStorageSync('address') || null
  },
  onShow() {
    this.getCartList()
  },
  methods: {
    getAddress() {
      uni.chooseAddress().then((res) => {
        console.log(res[1])
        this.addressInfo = res[1]
        uni.setStorageSync('address', this.addressInfo)
      })
    },
    getCartList() {
      this.cartList = uni.getStorageSync('cart')
      this.cartList = this.cartList.filter((x) => x.checked)
    },
    async getUserInfo(e) {
      // console.log(e.detail)
      // 获取用户信息
      const { encryptedData, rawData, iv, signature } = e.detail
      // 进行登陆获取信息
      let res = await uni.login()
      const code = res[1].code
      // 获取token
      const data = await this.request({
        url: '/users/wxlogin',
        method: 'POST',
        data: {
          encryptedData,
          rawData,
          iv,
          signature,
          code,
        },
      })
      console.log('登陆信息')
      console.log(data)
      const { token } = data
      const goods = this.cartList.map((x) => ({
        goods_id: x.goods_id,
        goods_number: x.goods_number,
        goods_price: x.goods_price,
      }))
      const consignee_addr =
        this.addressInfo.provinceName +
        this.addressInfo.cityName +
        this.addressInfo.countyName +
        this.addressInfo.detailInfo
      // 创建订单
      const order = await this.request({
        url: '/my/orders/create',
        header: { Authorization: token },
        method: 'post',
        data: {
          // 订单总价格
          order_price: this.allPrice,
          // 收货地址
          consignee_addr,
          // 订单数组
          goods,
        },
      })
      // 订单号
      const { order_number } = order
      // 获取支付参数
      const paydata = await this.request({
        url: '/my/orders/req_unifiedorder',
        method: 'post',
        header: { Authorization: token },
        data: {
          order_number,
        },
      })
      const { pay } = paydata
      // console.log(pay)
      // console.log(order)
      // const {nonceStr,package,paySign,timeStamp} = pay

      // console.log(this.cartList)
      const payflag = await uni.requestPayment(pay)
      // console.log(payflag)
      const result = await this.request({
        url: '/my/orders/chkOrder',
        method: 'post',
        header: { Authorization: token },
        data: {
          order_number,
        },
      })

      if (result) {
        await uni.showToast({
          title: '支付成功',
        })
        // 将购买后的商品删除，并保存到本地
        let dataList = uni.getStorageSync('cart')
        dataList = dataList.filter((x) => !x.checked)
        uni.setStorageSync('cart', dataList)

        await setTimeout(() => {
          uni.switchTab({
            url: '/pages/cart/index',
          })
        }, 500)
      }
    },
  },
  computed: {
    allPrice() {
      let sum = 0
      if (this.cartList.length) {
        this.cartList.forEach((x) => {
          if (x.checked) {
            sum += x.goods_price * x.count
          }
        })
      }
      return sum
    },
    length() {
      if (!this.cartList) {
        return 0
      }
      return this.cartList.filter((x) => x.checked).length
    },
  },
}
</script>

<style lang="scss">
.content {
  .title {
    font-size: 40rpx;
    margin-top: 30rpx;
  }
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100rpx;
  //  border-bottom: 2rpx solid $theme-color;
  button {
    height: 100rpx;
    width: 60%;
    margin: 40rpx 0;
    font-size: 36rpx;
  }
  .address {
    width: 100%;
    padding: 20rpx;
    border-bottom: 2rpx solid $theme-color;
    .userInfo {
      display: flex;
      justify-content: space-between;
    }
  }
}
.floor {
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  // background: orange;
  width: 100%;
  border-top: 2rpx solid #ddd;
  display: flex;
  .left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    label {
      display: flex;
      align-items: center;
    }
    .total {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text {
        font-weight: 600;
        color: $theme-color;
        font-size: 36rpx;
      }
    }
  }
  .right {
    width: 240rpx;

    position: relative;
    .navigator {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      background: $theme-color;
      view {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
      }
    }
    .login_pay {
      position: absolute;
      top: 0;
      // bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // z-index: 100;
      opacity: 0;
      margin: 0;
    }
  }
}
.item {
  display: flex;
  width: 100%;
  padding: 20rpx;
  border-bottom: 1px solid #ddd;
  // align-items: center;
  checkbox-group {
    width: 80rpx;
    display: flex;
    align-items: center;
  }
  image {
    width: 150rpx;
    height: 150rpx;
    flex-shrink: 0;
    margin: 0 20rpx;
  }
  .item_info {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // height:100%;
    .info_name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 24rpx;
    }
    .item_price {
      display: flex;
      justify-content: space-between;
      .price {
        color: $theme-color;
        font-size: 38rpx;
      }
      .changNum {
        display: flex;
        line-height: 50rpx;
        view {
          width: 50rpx;
          height: 50rpx;
          border: 1px solid #ddd;
          text-align: center;
        }
        text {
          padding: 0 20rpx;
        }
      }
    }
  }
}
</style>
